import React from "react";
import "./ReadBook.css";
import { setStorage, getStorage } from "../../utils/utils";
import { Drawer,message } from "antd";

class ReadBook extends React.Component {
  constructor() {
    super();
    this.state = {
      bookDirectoryData: "",
      visible: false,
      placement: "left",
      bookTxtData: "",
      directoryName: "",
      bookName: "",
    };
  }

  componentDidMount() {
    let bookInformation = this.props.history.location.state
      ? this.props.history.location.state.bookInformation
      : getStorage("bookInformation");
    if (bookInformation) {
      setStorage("bookInformation", bookInformation);
    }
    this.getBookDirectory(bookInformation.id);
    this.setState({
      bookName: bookInformation.bookName,
    });
  }

  // 获取书籍目录信息
  getBookDirectory(bookId) {
    this.axios({
      url: "/index/getBookDirectory",
      method: "post",
      data: { bookId: bookId },
    }).then((data) => {
      this.setState(
        {
          bookDirectoryData: data.data.data,
        },
        function () {
          this.getBookTxt(0);
          setStorage('nowDirectory',0)
        }
      );
    });
  }

  // 获取某一章节TXT
  getBookTxt(index) {
    this.axios({
      url: "/index/getBookTxts",
      method: "post",
      data: { directoryIndex: index },
    }).then((data) => {
      let nerName = data.data.data.directoryName.split('.')[1]
      this.setState({
        bookTxtData: data.data.data.data,
        directoryName: nerName,
      });
      this.onClose();
    });
  }

  // 获取章节目录DOM
  getBookDirectoryDom(List) {
    if (List) {
      return List.map((item, i) => {
        let arr = item.split("/");
        let newArr = arr[arr.length - 1].split('.')
        return (
          <p className="directoryList" onClick={() => this.getBookTxt(i)}>
            {newArr[1]}
          </p>
        );
      });
    }
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onChange = (e) => {
    console.log(e.target.value);
    this.setState({
      placement: e.target.value,
    });
  };

  // 返回书籍详情页面
  returnBookDetails(){
    this.props.history.push('/TotalEntry/BookDetails')
  }

  
  changeDirectory(num){
    let nowDirectory = getStorage('nowDirectory') + num
    
    console.log(nowDirectory)
    console.log(this.state.bookDirectoryData.length)
    if(nowDirectory < 0){
      message.warning('已经是第一章啦');
    }else if(nowDirectory >= this.state.bookDirectoryData.length){
      message.warning('已经是最后一章啦');
    }else{
      setStorage('nowDirectory',nowDirectory)
      this.getBookTxt(getStorage('nowDirectory'))
    }
  }

  render() {
    return (
      <div className="background">
        <div className="readBook">
          <div className="bookDetail">
            <span className="bookName">《{this.state.bookName}》</span>
            <span className="chapterName"> - {this.state.directoryName}</span>
          </div>
          <pre className="bookTxt">
            <p className="Title">{this.state.directoryName}</p>
            <p>{this.state.bookTxtData}</p>
          </pre>
          <div className="directory" onClick={this.showDrawer}>
            <p className="iconfont icon-shejimulu"></p>目录
          </div>
          <div className="operation">
            <div className='returnBookDetails' onClick={() => this.returnBookDetails()}><span className='iconfont icon-fanhui'></span></div>
            <div className='prevChapter' onClick={() => this.changeDirectory(-1)}><span className='iconfont icon-shangyiye'></span></div>
            <div className='nextChapter' onClick={() => this.changeDirectory(1)}><span className='iconfont icon-shangyiye'></span></div>
          </div>
        </div>

        <Drawer
          title="选择章节"
          placement={this.state.placement}
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
          key={this.state.placement}
        >
          {this.getBookDirectoryDom(this.state.bookDirectoryData)}
        </Drawer>
      </div>
    );
  }
}

export default ReadBook;
